<template>
  <div class="warper">
    <el-row class="header">
      <el-col :span="24"><navbar></navbar></el-col>
    </el-row>
    <div class="body">
      <div class="sidebar"><leftbar></leftbar></div>
      <div class="main"><div class="context"><router-view></router-view></div></div>
    </div>
  </div>

</template>
<script>
  import Leftbar from './components/leftbar.vue'
  import Navbar from './components/Navbar.vue'

  export default {
    components:{Navbar,Leftbar}
  }
</script>
<style>
  *{margin: 0;padding: 0;}
  html{height: 100%;}
  body{height: 100%;}
</style>
<style scoped>
  .header{width:100%;height: 65px;background-color:#324057;position: fixed;z-index: 101;}
  .header .el-col{height: 65px;}
  .body{width:100%;top:65px;bottom:0px;position: absolute;z-index: 100;}
  .sidebar{width:240px;position:fixed;top:65px;bottom:0px;z-index:102;overflow-x:hidden;background-color: #ffffff;}
  .main{position: absolute;top: 0px;bottom: 0px;left: 240px;right: 0px;overflow: hidden;overflow-y: auto;background-color: #E5E9F2;}
  .context{width: 95%;background-color: #ffffff;padding-top: 50px;margin: 25px auto;}
</style>
